import { Editor } from 'amis-editor';
import React, { Component } from 'react';
import '../scss/style.scss';
import 'amis/lib/themes/default.css';
import 'amis/sdk/iconfont.css';
import 'amis-editor/dist/style.css';
import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/css/v4-shims.css';
import '../editor/DisabledEditorPlugin';
import '@/editor/DisabledEditorPlugin';
import { history } from 'umi';

let schemaJson: any = null;

function change(val: any) {
  console.log('change value=', val);
  schemaJson = val;
  localStorage.setItem('jsonSchema', JSON.stringify(val));
}

//初始化数据
function initSchema() {
  schemaJson = JSON.parse(localStorage.getItem('jsonSchema') as string);
}

initSchema();


class IndexPage extends Component {
  state = {
    isMobile: false,
    preview: false,
    schemaJson: null,
  };

  constructor(props: any) {
    super(props);

  }

  setMobile(flag: boolean) {
    this.setState({//异步
      isMobile: flag,
    });
  }

  setPreview(flag: boolean) {
    this.setState({//异步
      preview: flag,
    });
  }

  render() {
    function exit() {
      console.log('退出编辑器');
    }
    // initSchema();
    // @ts-ignore
    return (
      <div className='Editor-main'>
        <div className='Editor-header'>
          <div className='Editor-title'>页面可视化编辑器</div>
          <div className='Editor-view-mode-group-container'>
            <div className='Editor-view-mode-group'>
              <div
                className={`Editor-view-mode-btn ${
                  !this.state.isMobile ? 'is-active' : ''
                }`}
                onClick={() => {
                  this.setMobile(false);
                }}
              > PC模式
              </div>
              <div
                className={`Editor-view-mode-btn ${
                  this.state.isMobile ? 'is-active' : ''
                }`}
                onClick={() => {
                  this.setMobile(true);
                }}
              > 移动模式
              </div>
            </div>
          </div>
          <div className='Editor-header-actions'>
            <div
              className={`header-action-btn margin-left-space ${
                this.state.preview ? 'primary' : ''
              }`}
              onClick={() => {
                this.setPreview(!this.state.preview);
              }}
            >
              {this.state.preview ? '编辑' : '预览'}
            </div>
            {!this.state.preview && (
              <div className={`header-action-btn save-btn`} onClick={save}>
                保存
              </div>
            )}
            {!this.state.preview && (
              <div className={`header-action-btn exit-btn`} onClick={exit}>
                退出
              </div>
            )}
          </div>
        </div>
        <div className='Editor-inner'>
          <Editor
            theme={'cxd'}
            className='is-fixed'
            isMobile={this.state.isMobile}
            showCustomRenderersPanel={true}
            preview={this.state.preview}
            autoFocus={true}
            onChange={change} value={schemaJson} />
        </div>
      </div>
    );
  }
}

/**
 * 保存页面配置
 */
function save() {
  const msg: ReqMessageModel = {
    data: schemaJson,
    type: MessageEnums.SAVE,
  };
  console.log('schemaJson====', msg);
  sendMsg2Parent(msg);
}

/**
 * 从父窗体接收消息
 */
window.addEventListener('message', (e) => {
  console.log('接受消息来到至主页的消息：', e.data);
});

/**
 * 发送消息给父窗体
 */
function sendMsg2Parent(msg: ReqMessageModel) {
  window.parent.postMessage(JSON.stringify(msg), location.origin);
}

export default IndexPage;
